<template>
  <div>
    <!-- 搜索表单 行内表单 -->
    <el-form   :rules="rules"  ref="form"
      :inline="true"
      :model="form"
      @submit.native.prevent
      class="demo-form-inline"
    >
      <el-form-item label="姓名" prop="directorName">
        <el-input
          v-model="form.directorName"
          @keyup.native.enter="onSubmit"
          placeholder="输入姓名"
        ></el-input> </el-form-item
      ><br />
      <el-form-item label="选择头像" prop="directorAvatar">
        <el-upload
          v-model="form.directorAvatar"
          class="avatar-uploader"
          action="http://localhost:9000/upload"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          ><img
            v-if="form.directorAvatar"
            :src="form.directorAvatar"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <br />
      <el-form-item>
        <el-button type="primary" @click="submit">新增</el-button>
        <el-button type="primary">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import myaxios from "@/http/MyAxios";
export default {
  data() {
    return {
      form: {
        directorName: "",
        directorAvatar: "",
      },
      rules: {
        directorName: [
          { required: true, message: "姓名必填", trigger: "blur" },
        ],
        directorAvatar: [
          { required: true, message: "头像必须上传", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log("验证通过");
        }
        let url = "http://localhost:3010/movie-director/add";
        myaxios.post(url, this.form).then((res) => {
            console.log('添加成功');
            if(res.data.code==200){
                this.$refs['form'].resetFields()
                this.$message({
                    message:'新增导演完成',
                    type:'success'
                })
            }
        });
      });
    },
    handleAvatarSuccess(res,file) {
        console.log(res);
        this.form.directorAvatar=res.data
    },
    beforeAvatarUpload() {},
  },
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>
